<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>请假申请</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="/static/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="/static/plugin/zTree_v3/css/zTreeStyle/zTreeStyle.css">
		<link rel="stylesheet" href="/static/plugin/zTree_v3/css/demo.css">
		<script src="/static/plugin/zTree_v3/js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="/static/layui/layui.js"></script>
		<script src="/static/plugin/ztree/js/jquery.ztree.core.js"></script>
		<script src="/static/plugin/ztree/js/jquery.ztree.excheck.js"></script>
		<script src="/static/plugin/ztree/js/jquery.ztree.exedit.js"></script>
		<script type="text/javascript" src="/static/js/formSelects.js"></script>
		<script type="text/javascript" src="/static/js/base.js"></script>
	</head>
	<body>
		<div style="margin: 15px;">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend align="top">请假申请</legend>
			</fieldset> 
			<form class="layui-form" id="formID" name="formName" >
				<div class="layui-form-item">
					<label class="layui-form-label">请假类型</label>
					<div class="layui-inline" style="width: 500px;">
						<input type="text" th:value="${leaveRequest.leaveRequestType}"  lay-verify="required"  autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">开始时间</label>
					<div class="layui-input-block">
						<input style="width:500px" type="text" name="startDate" th:value="${leaveRequest.startDate}" lay-verify="required" placeholder="请选择开始时间！" autocomplete="off" class="layui-input" >
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">结束时间</label>
					<div class="layui-input-block">
						<input style="width:500px" type="text" name="endDate" th:value="${leaveRequest.endDate}" lay-verify="required" placeholder="请选择结束时间！" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">时长</label>
					<div class="layui-input-block">
						<input type="hidden" th:value="${leaveRequest.leaveRequestId}" id="requestId">
						<input style="width:500px" id="time" type="text" name="duration" th:value="${leaveRequest.duration}" lay-verify="required" value="" placeholder="点击自动计算..." autocomplete="off" class="layui-input" onclick="diff()">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">请假事由</label>
					<div class="layui-input-block">
						<textarea style="width:500px;" name="cause" th:text="${leaveRequest.cause}"  lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
					</div>
				</div>
				<!--<div class="layui-form-item">
					<label class="layui-form-label">图片上传</label>
					<div class="layui-input-block">
						<input type="hidden" name="imageUrl" id="imageUrl">
						<button type="button" class="layui-btn" id="test1">
							<i class="layui-icon">&#xe67c;</i>上传图片
						</button>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">文件上传</label>
					<div class="layui-input-block">
						<input type="hidden" name="fileUrl" id="fileUrl">
						<button type="button" class="layui-btn" id="test2">
						<i class="layui-icon">&#xe67c;</i>上传文件
					</button>
					</div>
				</div>-->
				<!--<div class="layui-form-item">
					<label class="layui-form-label">审批人</label>
					<div class="layui-input-inline"  style = "width:280px;">
						<select xm-select="approverBy" name="approverBy">
							<option value=""></option>
							<option th:each="sysUser:${sysUserList}" th:value="${sysUser.userId}" th:text="${sysUser.realName}"></option>
						</select>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">抄送人</label>
					<div class="layui-input-inline"  style = "width:280px;">
						<select  name="copyGiveBy">
							<option value=""></option>
							<option th:each="sysUser:${sysUserList}" th:value="${sysUser.userId}" th:text="${sysUser.realName}"></option>
						</select>
					</div>
				</div>-->

				<div class="layui-form-item">
					<label class="layui-form-label">审批意见</label>
					<div class="layui-input-block">
						<textarea style="width:500px;" name="proposal"   lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button id="submit" class="layui-btn" type="submit" lay-submit="" lay-filter="submit">
							<i class="layui-icon">&#xe618;</i>同意
						</button>
						<!--<button type="reset" class="layui-btn layui-btn-primary">-->
							<!--<i class="layui-icon">&#x1002;</i>重置-->
						<!--</button>-->
						<button onclick="back()" type="button" class="layui-btn layui-btn-primary">
							<i class="layui-icon">&#xe65c;</i>返回
						</button>
					</div>
				</div>
			</form>
		</div>
		<script>
			//返回
			function back(){
				location.href="/meSponsor/queryCopySponsorPage";
			}
			//计算请假时长
			function diff(){
				//获取开始结束时间并转换为时间戳
				var date1 = $("#beginTime").val();
				var date2 = $("#endTime").val();
				//转换
				var time1 = Date.parse(date1);
				var time2 = Date.parse(date2);
				//时差
				var date = time2-time1;
				var day = parseInt(date/1000/60/60/24);
				var hour = parseInt((date/1000/60/60)%24);
				$("#time").val(day+"天"+hour+"小时");
				if(date1 == "" || date2 == ""){
					layer.msg("时间不能为空",{icon:2})
					$("#time").val("");
				}else if(date2 < date1){
					layer.msg("结束时间必须在开始时间之后！",{icon:2})
					$("#time").val("");
				}
			}


			layui.use(['table','layer','upload','form','laydate'], function(){
				var upload = layui.upload;
				var table = layui.table;
				var form=layui.form;
				var laydate = layui.laydate;
				var formSelects = layui.formSelects;
				//执行实例
				upload.render({
					elem: '#test1' //绑定元素
					,url: '/upload/' //上传接口
					,accept:'images'
					,done: function(res){
						//上传完毕回调
						$('#imageUrl').val(res.face)
					}
					,error: function(){
						//请求异常回调
						$('#imageUrl').val('')
					}
				});

				//执行实例
				upload.render({
					elem: '#test2' //绑定元素
					,url: '/upload/' //上传接口
					,accept:'file'
					,done: function(res){
						//上传完毕回调
						$('#fileUrl').val(res.face)
					}
					,error: function(){
						//请求异常回调
						$('#fileUrl').val('')
					}
				});
				//开始时间
				laydate.render({
					elem: '#beginTime'
					,type: 'datetime'
				});
				//结束时间
				laydate.render({
					elem: '#endTime'
					,type: 'datetime'
				});
				form.on('submit(submit)', function(datas) {
					var proposal = $('[name = "proposal"]').val();
					var requestId = $('#requestId').val();
					$("#submit").attr("disabled","disabled");
					$.ajax({
						url:'/leaveRequest/approval',
						data:{'proposal':proposal,'requestType':'qj','requestId':requestId},
						cache: false,
						success:function (res) {
							if(res){
								layer.msg("提交成功！",{icon:1})
								setTimeout(function(){  //使用  setTimeout（）方法设定定时3000毫秒
									//关闭模态框
									// 父页面刷新
									window.location.reload();
								},3000);
							}else{
								layer.msg("提交失败！",{icon:2})
							}
						}
					})
					return false;
				});
			});
		</script>
	</body>

</html>